<template>
  <el-card>
    <div class="sendout">
      <h3 class="applyRecode">已出账单列表</h3>
      <el-form  class="form" :model="form" ref="form" label-width="100px">
        <el-form-item class="year" size="small" label="年份选择：">
          <el-date-picker v-model="form.year" type="year" placeholder="选择年"></el-date-picker>
        </el-form-item>
        <el-form-item class="year" size="small" label="月份选择：">
          <el-date-picker v-model="form.month" type="month" placeholder="选择月"></el-date-picker>
        </el-form-item>
        <el-form-item class="year mon" size="small" label="账单状态：">
          <el-select class="publis" v-model="form.accState" placeholder="请选择">
            <el-option v-for="(item, index) in items" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item class="year mon" size="small" label="发票状态：">
          <el-select class="publis" v-model="form.faState" placeholder="请选择">
            <el-option v-for="(fa, findex) in fas" :key="findex" :label="fa.label" :value="fa.value"></el-option>
          </el-select>
        </el-form-item>
        <div class="btns"><el-button type="primary" @click="findInit" size="small">查询</el-button></div>
      </el-form>
      <el-table class="tables" :data="tableData">
        <el-table-column prop="year" label="年份" align="center"></el-table-column>
        <el-table-column prop="month" label="月份" align="center"></el-table-column>
        <el-table-column prop="orderMounts" label="订单数量" align="center"></el-table-column>
        <el-table-column prop="monNum" label="本月销量（元）" align="center"></el-table-column>
        <el-table-column prop="monRef" label="本月退款（元）" align="center"></el-table-column>
        <el-table-column prop="charge" label="平台交易服务费（元）" align="center"></el-table-column>
        <el-table-column prop="profit" label="扶贫公益基金（元）" align="center"></el-table-column>
        <el-table-column prop="monIncome" label="本月收入（元）" align="center"></el-table-column>
        <el-table-column prop="accStatus" label="账单状态" align="center"></el-table-column>
        <el-table-column prop="faStatus" label="发票状态" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="look(scope.row)">查看详情</el-button>
            <el-button type="text" @click="surea" size="small">确认账单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination background style="float:right;margin:0 0 30px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: 'sendout',
  data () {
    return {
      currentPage: 1,
      pagesize: 10,
      total: 40,
      form: {
        yeay: '',
        month: '',
        accState: '',
        faState: ''
      },
      items: [
        {
          label: '全部',
          value: '0'
        },
        {
          label: '状态1',
          value: '1'
        }
      ],
      fas: [
        {
          label: '全部',
          value: '0'
        },
        {
          label: '状态1',
          value: '1'
        }
      ],
      tableData: [
        {
          year: '',
          month: '',
          orderMounts: 2,
          monNum: '',
          monRef: '',
          charge: '',
          profit: '',
          monIncome: '',
          accStatus: '',
          faStatus: ''
        }
      ]
    }
  },
  methods: {
    surea () {
      this.$confirm('账单已核对确认无误', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '确认无误成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    look (row) {
      this.$router.push('/outdetail')
    },
    findInit () {
      // this.currentPage = 1
      // this.init()
    },
    handleSizeChange (val) {
      // this.pagesize = val
      // this.init()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      // this.currentPage = val
      // this.init()
      console.log(`当前页: ${val}`)
    }
  }
}
</script>
<style lang="scss" scope>
.sendout {
  .form {
    .year {
      .el-input {
        width: 190px;
      }
      .el-select {
        width: 180px;
      }
    }
    .year.mon {
      margin-right: 15px;
    }
  }
}
</style>
